<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <TodoHeader @addTask="addTask" />
        <TodoMain :todoList="todoList" />
        <TodoFooter :todoList="todoList" @checkAllState="checkAllState" />
        <button @click="off">解绑按钮</button>
      </div>
    </div>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      todoList: [
        { id: 1, todoName: '游泳', done: false },
        { id: 2, todoName: '滑雪', done: true },
        { id: 3, todoName: '爬山', done: true },
      ],
    }
  },
  methods: {
    // 1.添加任务
    addTask(todoName) {
      this.todoList.unshift({
        id: Date.now(),
        todoName,
        done: false,
      })
    },
    checkAllState(val) {
      this.todoList.forEach((item) => (item.done = val))
    },
    //解绑自定义事件
    off() {
      this.$bus.$off()
    },
  },
  mounted() {
    //挂载的时候注册事件
    //2.删除一个任务项
    this.$bus.$on('delTask', (id) => {
      this.todoList = this.todoList.filter((item) => item.id !== id)
    })
    this.$bus.$on('updateState', (id) => {
      const item = this.todoList.find((item) => item.id === id)
      item.done = !item.done
    })
    this.$bus.$on('delDoneTask', () => {
      this.todoList = this.todoList.filter((item) => !item.done)
    })
  },
}
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
